import {Button, DatePicker, Input, message, Modal, Radio} from "antd";
import moment from "moment";
import TextArea from "antd/es/input/TextArea";
import Apis from "../../configs/Apis";
import RequestUtils from "../../utils/RequestUtils";
import {useNavigate} from "react-router-dom";

const UserEdit = (props) => {

    const {editUserParam, setEditUserParam} = props;
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();

    /**
     * 编辑用户信息
     */
    const doEditUser = () => {
        RequestUtils.post(Apis.user.editUser, {
            userId: editUserParam.userInfo.id,
            userNickname: editUserParam.userInfo.userNickname,
            userGender: editUserParam.userInfo.userGender,
            userBirthDate: moment(editUserParam.userInfo.userBirthDate).format("YYYY-MM-DD"),
            userAddress: editUserParam.userInfo.userAddress,
            userIntroduction: editUserParam.userInfo.userIntroduction
        }).then(res => {
            messageApi.success("编辑用户信息成功");
            setEditUserParam({
                editUserModalVisible: false,
                userInfo: {}
            });
            // 刷新页面
            navigate(0);
        }).catch(err => {
            messageApi.error("编辑用户信息失败: " + err.message);
        })
    }

    return (
        <Modal
            open={editUserParam.editUserModalVisible}
            title={"编辑用户信息"}
            onCancel={() => {
                setEditUserParam({
                    editUserModalVisible: false,
                    userInfo: {}
                })
            }}
            footer={<div>
                <Button danger={true} onClick={() => {
                    setEditUserParam({
                        editUserModalVisible: false,
                        userInfo: {}
                    })
                }}>
                    取消
                </Button>
                <Button
                    type={"primary"}
                    style={{marginLeft: '15px'}}
                    onClick={() => doEditUser()}
                >
                    编辑
                </Button>
            </div>}
        >
            <div style={{
                maxWidth: '500px',
                margin: '10px 20px',
                padding: '20px'
            }}>
                {contextHolder}

                <div>
                    <div style={{marginBottom: '16px', display: 'flex', alignItems: 'center'}}>
                        <label style={{width: '100px', textAlign: 'right'}}>
                            用户昵称：
                        </label>
                        <Input
                            style={{width: '250px'}}
                            placeholder="请输入用户昵称"
                            value={editUserParam.userInfo.userNickname}
                            onChange={(e) => {
                                setEditUserParam({
                                    ...editUserParam,
                                    userInfo: {
                                        ...editUserParam.userInfo,
                                        userNickname: e.target.value
                                    }
                                })
                            }}
                        />
                    </div>
                    <div style={{marginBottom: '16px', display: 'flex', alignItems: 'center'}}>
                        <label style={{width: '100px', textAlign: 'right'}}>
                            用户性别：
                        </label>
                        <Radio.Group
                            style={{width: '250px'}}
                            defaultValue={editUserParam.userInfo.userGender}
                            options={[
                                {value: 1, label: '男'},
                                {value: 2, label: '女'}
                            ]}
                            onChange={(e) => {
                                setEditUserParam({
                                    ...editUserParam,
                                    userInfo: {
                                        ...editUserParam.userInfo,
                                        userGender: e.target.value
                                    }
                                })
                            }}
                        />
                    </div>
                    <div style={{marginBottom: '16px', display: 'flex', alignItems: 'center'}}
                    >
                        <label style={{width: '100px', textAlign: 'right'}}>
                            出生日期：
                        </label>
                        <DatePicker
                            style={{width: '250px'}}
                            placeholder={"请选择出生日期"}
                            // 使用value而不是defaultValue，确保受控组件特性
                            value={editUserParam.userInfo.userBirthDate ? moment(editUserParam.userInfo.userBirthDate) : null}
                            // 点击时清空值
                            onClick={() => {
                                setEditUserParam(prev => ({
                                    ...prev,
                                    userInfo: {
                                        ...prev.userInfo,
                                        userBirthDate: null
                                    }
                                }));
                            }}
                            // 选择日期时更新值
                            onChange={(date, dateString) => {
                                setEditUserParam(prev => ({
                                    ...prev,
                                    userInfo: {
                                        ...prev.userInfo,
                                        userBirthDate: dateString
                                    }
                                }));
                            }}
                            // 可选：面板打开时再次确保值已清空
                            onOpenChange={(open) => {
                                if (open) {
                                    setEditUserParam(prev => ({
                                        ...prev,
                                        userInfo: {
                                            ...prev.userInfo,
                                            userBirthDate: null
                                        }
                                    }));
                                }
                            }}
                        />
                    </div>
                    <div style={{marginBottom: '16px', display: 'flex', alignItems: 'center'}}>
                        <label style={{width: '100px', textAlign: 'right'}}>
                            所在地区：
                        </label>
                        <Input
                            style={{width: '250px'}}
                            placeholder="请输入用户所在地区"
                            value={editUserParam.userInfo.userAddress}
                            onChange={(e) => {
                                setEditUserParam({
                                    ...editUserParam,
                                    userInfo: {
                                        ...editUserParam.userInfo,
                                        userAddress: e.target.value
                                    }
                                })
                            }}
                        />
                    </div>
                    <div style={{display: 'flex'}}>
                        <label style={{width: '100px', textAlign: 'right', marginTop: '5px'}}>
                            个人介绍：
                        </label>
                        <TextArea
                            style={{width: '250px'}}
                            placeholder="请输入用户个人介绍"
                            value={editUserParam.userInfo.userIntroduction}
                            autoSize={{minRows: 3, maxRows: 5}}
                            onChange={(e) => {
                                editUserParam.userInfo.userIntroduction = e.target.value;
                                setEditUserParam({...editUserParam});
                            }}
                        />
                    </div>
                </div>
            </div>
        </Modal>
    )
}
export default UserEdit;